<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学成在线</title>
    <!--  这里引入CSS顺序不能错,先清除再设置-->
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<!--  头部区域-->
<div class="header">
    <div class="wrapper">
        <!--logo-->
        <div class="logo">
            <!--                搜索引擎优化：提升网站百度搜索排名-->
            <h1><a>学成在线</a></h1>
        </div>
        <!--导航-->
        <div class="nav">
            <ul>
                <li><a href="#" class="active">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!--搜索-->
        <div class="search">
            <input type="text" placeholder="请输入关键词">
            <a href="#"></a>
        </div>
        <!--用户-->
        <div class="user">
            <a href="#" >
                <img src="../uploads/user.png" alt="">
                <span>博学仔前端</span>
            </a>
        </div>
    </div>
</div>

<!--banner区域-->
<div class="banner">
    <div class="wrapper">
     <div class="left">
         <ul>
             <li><a href="#" >前端工程师</a></li>
             <li><a href="#">2</a></li>
             <li><a href="#">3</a></li>
             <li><a href="#">4</a></li>
             <li><a href="#">5</a></li>
             <li><a href="#">6</a></li>
             <li><a href="#">7</a></li>
             <li><a href="#">8</a></li>
             <li><a href="#">9</a></li>
         </ul>
     </div>
      <div class="right">
          <h3>我的课程表</h3>
          <div class="content">
              <dl>
                  <dt>数据可视化课程</dt>
                  <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
              </dl>
              <dl>
                  <dt>数据可视化课程</dt>
                  <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
              </dl>
              <dl>
                  <dt>数据可视化课程</dt>
                  <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
              </dl>
              <div class="button">全部课程</div>
          </div>
      </div>
    </div>
</div>
<!--推荐区域-->
<div class="recommend wrapper">
    <h3>精品推荐</h3>
    <ul>
        <li><a href="#" >HTML</a></li>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">javaScript</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Node.js</a></li>
        <li><a href="#">Ajax</a></li>
        <li><a href="#">Vue2.0</a></li>
        <li><a href="#">Vue3.0</a></li>
        <li><a href="#">Ts</a></li>
        <li><a href="#">React</a></li>
    </ul>
    <a href="#" class="modify">修改兴趣</a>
</div>
<!--精品推荐区域-->
<div class="course wrapper">
<!--    标题-->
    <div class="hd">
        <h3>精品推荐</h3>
        <a href="#" class="more">查看全部</a>
    </div>
    <div class="bd">
        <ul>
            <li><a href="#">
                <div class="pic"></div>
                <div class="text">
                    <h4>JavaScript数据看板项目实战</h4>
                    <p><span>高级</span>-<i>1125人在学习</i></p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"></div>
                <div class="text">
                    <h4>JavaScript数据看板项目实战</h4>
                    <p><span>高级</span>-<i>1125人在学习</i></p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"></div>
                <div class="text">
                    <h4>JavaScript数据看板项目实战</h4>
                    <p><span>高级</span>-<i>1125人在学习</i></p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"></div>
                <div class="text">
                    <h4>JavaScript数据看板项目实战</h4>
                    <p><span>高级</span>-<i>1125人在学习</i></p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"></div>
                <div class="text">
                    <h4>JavaScript数据看板项目实战</h4>
                    <p><span>高级</span>-<i>1125人在学习</i></p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"></div>
                <div class="text">
                    <h4>JavaScript数据看板项目实战</h4>
                    <p><span>高级</span>-<i>1125人在学习</i></p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"></div>
                <div class="text">
                    <h4>JavaScript数据看板项目实战</h4>
                    <p><span>高级</span>-<i>1125人在学习</i></p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"></div>
                <div class="text">
                    <h4>JavaScript数据看板项目实战</h4>
                    <p><span>高级</span>-<i>1125人在学习</i></p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"></div>
                <div class="text">
                    <h4>JavaScript数据看板项目实战</h4>
                    <p><span>高级</span>-<i>1125人在学习</i></p>
                </div>
            </a></li>
            <li><a href="#">
                <div class="pic"></div>
                <div class="text">
                    <h4>JavaScript数据看板项目实战</h4>
                    <p><span>高级</span>-<i>1125人在学习</i></p>
                </div>
            </a></li>
        </ul>
    </div>

</div>
<!--前端-->
<div class="wrapper">
    <div class="hd">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#" class="active">前端</a></li>
            <li><a href="#">后端</a></li>
            <li><a href="#">移动</a></li>
            <li><a href="#">测试</a></li>
        </ul>
        <a href="#" class="more">查看全部</a>
    </div>
    <div class="bd">
        <div class="left"><img src="/study/" alt=""></div>
        <div class="right">right</div>
    </div>
</div>
</body>
</html>
